<template>
	<div>
		<div>
			<el-row>
				<el-button type="primary" size="mini" round><i class="el-icon-circle-plus-outline"></i> 新增</el-button>
				<el-button type="success" size="mini" round><i class="el-icon-finished"></i> 保存</el-button>
				<el-button type="danger" size="mini" round><i class="el-icon-delete"></i> 删除</el-button>
				<el-button type="primary" size="mini" round><i class="el-icon-printer"></i> 打印</el-button>
				<el-divider direction="vertical"></el-divider>
				<el-button type="primary" size="mini" round>提交审批</el-button>
				<el-button type="primary" size="mini" round>撤销审批</el-button>
				<el-button type="primary" size="mini" round>审批</el-button>
				<el-divider direction="vertical"></el-divider>
				<el-button type="primary" size="mini" plain round>首张</el-button>
				<el-button type="primary" size="mini" plain round>上张</el-button>
				<el-button type="primary" size="mini" plain round>下张</el-button>
				<el-button type="primary" size="mini" plain round>末张</el-button>
			</el-row>
		</div>
		<hr />
		<h2>采购计划</h2>
		<div class="pur-main">
			<el-form ref="form" :rules="rules" :model="form" label-width="90px" size="small">
				<el-row gutter="20">
					<el-col span="8">
						<el-form-item prop="theme" label="主题:">
							<el-input v-model="form.theme" placeholder="输入主题"></el-input>
						</el-form-item>
					</el-col>
					<el-col span="8">
						<el-form-item prop="purtype" label="采购类别:">
							<el-select v-model="form.purtype" clearable placeholder="请选择">
								<el-option v-for="item in purType" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col span="8">
						<el-form-item prop="sourtype" label="单据来源:">
							<el-select v-model="form.sourtype" clearable placeholder="请选择">
								<el-option v-for="item in sourceType" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row gutter="20">					
					<el-col span="8">
						<el-form-item prop="aplidept" label="采购部门:">
							<el-input v-model="form.aplidept" type="text"></el-input>
						</el-form-item>
					</el-col>
					<el-col span="8">
						<el-form-item prop="planner" label="计划人:">
							<el-input v-model="form.planner" type="text"></el-input>
						</el-form-item>
					</el-col>
					<el-col span="8">
						<el-form-item prop="plandata" label="计划日期:">
							<el-date-picker v-model="form.plandata" type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row gutter="20">
					<el-col span="8">
						<el-form-item prop="sourceform" label="源单号:">
							<el-input v-model="form.sourceform">
								<el-button type="text" slot="suffix" icon="el-icon-search" @click="dialogTableVisible = true"></el-button>
							</el-input>
						</el-form-item>
					</el-col>
					<el-dialog title="源单列表" :visible.sync="dialogTableVisible">
						<el-form :inline="true" :model="dialogForm" class="demo-form-inline" size="mini">							
							<el-form-item label="查询条件:">
								<el-select v-model="dialogForm.tital" placeholder="主题">
									<el-option label="主题" value="theme"></el-option>
									<el-option label="编号" value="idcode"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-input v-model="dialogForm.text"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="onSubmit" plain>查询</el-button>
							</el-form-item>
						</el-form>
						<el-table :data="gridData" size="mini" border height="262" @selection-change="getSourceid">
							<el-table-column type="selection" width="45" align="center"></el-table-column>
							<el-table-column align="center" width="50" type="index" label="序号"></el-table-column>
							<el-table-column property="date" label="编号" width="150"></el-table-column>
							<el-table-column property="name" label="主题" width="200"></el-table-column>
							<el-table-column property="address" label="地址"></el-table-column>
						</el-table>
						<span slot="footer" class="dialog-footer">
							<el-button size="mini" @click="dialogTableVisible = false">取 消</el-button>
							<el-button size="mini" type="primary" @click="dialogTableVisible = false">确 定</el-button>
						</span>
					</el-dialog>
					<el-col span="6">
						<el-form-item prop="player" label="制单人:">
							<el-input v-model="form.player"></el-input>
						</el-form-item>
					</el-col>
					<el-col span="6">
						<el-form-item prop="playdata" label="制单日期:">
							<el-date-picker v-model="form.playdata" type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row >
					<el-col span="12">
						<el-form-item prop="remarks" label="备注:">
							<el-input v-model="form.remarks" type="textarea" maxlength="100" show-word-limit></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<div class="upload">
					<el-row>
						<el-upload class="upload-fj" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview"
						 :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed" :file-list="fileList">
							<el-button size="small" type="primary">附件</el-button>
						</el-upload>
					</el-row>
				</div>
				<div class="pur-detail">
					<hr/>
					<el-row>
						<span style="color:gray; margin-left: 10px;">采购计划明细</span>
						<el-divider direction="vertical"></el-divider>
						<el-button type="primary" size="mini" @click="addRow(tableData)" plain round>增行</el-button>
						<el-button type="primary" size="mini" @click="delData()" plain round>删行</el-button>
					</el-row>
					<hr />
					<el-table :data="tableData" border style="width:100%" size="mini" height="400" show-summary highlight-current-row
					 :summary-method="getSummaries" @selection-change="selectRow">
						<el-table-column type="selection" width="60" align="center"></el-table-column>
						<el-table-column align="center" width="80" type="index" label="序号"></el-table-column>
						<el-table-column align="center" width="120" prop="id" label="物品编号">
							<template slot-scope="scope">
								<el-input size="mini" v-model="scope.row.id"></el-input>
							</template>
						</el-table-column>
						<el-table-column align="center" width="150" prop="name" label="物品名称">
							<template slot-scope="scope">
								<el-input size="mini" v-model="scope.row.name"></el-input>
							</template>
						</el-table-column>
						<el-table-column align="center" width="120" prop="spec" label="规格">
							<template slot-scope="scope">
								<el-input size="mini" v-model="scope.row.spec"></el-input>
							</template>
						</el-table-column>
						<el-table-column align="center" width="120" prop="unit" label="单位">
							<template slot-scope="scope">
								<el-input size="mini" v-model="scope.row.unit"></el-input>
							</template>
						</el-table-column>
						<el-table-column align="center" width="120" prop="basicprice" label="基本价">
							<template slot-scope="scope">
								<el-input size="mini" v-model="scope.row.basicprice"></el-input>
							</template>
						</el-table-column>
						<el-table-column align="center" width="120" prop="taxprice" label="含税价">
							<template slot-scope="scope">
								<el-input size="mini" v-model="scope.row.taxprice"></el-input>
							</template>
						</el-table-column>
						<el-table-column align="center" width="120" prop="number" label="计划数量">
							<template slot-scope="scope">
								<el-input size="mini" v-model="scope.row.number"></el-input>
							</template>
						</el-table-column>
						<el-table-column align="center" width="120" prop="planmoney" label="计划金额">
							<template slot-scope="scope">
								<el-input size="mini" v-model="scope.row.planmoney"></el-input>
							</template>
						</el-table-column>
						<el-table-column align="center" width="180" prop="plokdata" label="计划交货日期">
							<template slot-scope="scope">
								<el-input size="mini" v-model="scope.row.plokdata"></el-input>
							</template>
						</el-table-column>
						<el-table-column align="center" width="180" prop="supplier" label="供应商">
							<template slot-scope="scope">
								<el-input size="mini" v-model="scope.row.supplier"></el-input>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</el-form>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {				
				purType: [{
					value: '选项1',
					label: '集中采购'
				}, {
					value: '选项2',
					label: '设备采购'
				}, {
					value: '选项3',
					label: '物料采购'
				}, {
					value: '选项4',
					label: '成品采购'
				}],
				
				form: {
					theme:'',
					purtype:'',
					planner:'',
					aplidept:'',
					plandata:'',
					sourtype:'',
					sourceform:'',
					player:'',
					playdata:'',
					remarks:''
				},
				dialogForm: {
					tital: '',
					text: ''
				},
				gridData: [{
					date: '2016-05-02',
					name: '王小',
					address: '上海市普陀区金沙江路 1518 弄'
				}, {
					date: '2016-05-04',
					name: '王虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}, {
					date: '2016-05-01',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}, {
					date: '2016-05-03',
					name: '小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}],
				dialogTableVisible: false,
				rules:{
					theme:[
						{ required: true, message: '请输入主题', trigger: 'blur' },
						{ min: 4, max: 10, message: '长度在 4 到 10 个字符', trigger: 'blur' }
					],
					purtype:[
						{ required: true, message: '请选择采购类别', trigger:'change' }
					],
					sourtype:[
						{ required: true, message: '请选择单据来源', trigger:'change' }
					]
				},
				sourceType: [{
					value: '1',
					label: '无来源',
				}, {
					value: '2',
					label: '采购申请',
				}, {
					value: '3',
					label: '库存填充'
				}],
				tableData:[{
					id:'',
					name:'',
					spec:'',
					unit:'',
					basicprice:'',
					taxprice:'',
					number:'',
					planmoney:'',
					plokdata:'',
					supplier:''
				}],
				selectlistRow: [],
			}
		},
		methods: {
			// 获取表格选中时的数据
			selectRow(val) {
				this.selectlistRow = val
			},
			//添加行
			addRow(tableData, event) {
				tableData.push({
					id: '',
					name: '',
					spec: '',
					unit: '',
					number: '',
					date: '',
					reason: ''
				})
			},
			//删除行
			delData() {
				for (let i = 0; i < this.tableData.length; i++) {
					const val = this.tableData[i];
					val.index = i
				}
			
				if (this.selectlistRow.length == 0)
					this.$message.error('请先选择删除的数据！')
				this.selectlistRow.forEach(val => {
					this.tableData.forEach((v, i) => {
						if (val.index == v.index) {
							// i 为选中的索引
							this.tableData.splice(i, 1)
						}
					})
				})
				// 删除完数据之后清除勾选框
				this.$refs.tableData.clearSelection()
			},
			//表尾合计
			getSummaries(param) {
				const {
					columns,
					data
				} = param;
				const sums = [];
				columns.forEach((column, index) => {
					if (index === 0) {
						sums[index] = '总计';
						return;
					}
					const values = data.map(item => Number(item[column.property]));
					if (!values.every(value => isNaN(value))) {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr);
							if (!isNaN(value)) {
								return prev + curr;
							} else {
								return prev;
							}
						}, 0);
						sums[index] += ' ';
					} else {
						sums[index] = ' ';
					}
				});
			
				return sums;
			},
			//dialog查询表单提交
			onSubmit() {
				console.log('submit!');
			},
			//选择源单号
			getSourceid(val){
				this.form.sourceform = (val[0])['name']				
			},
			
			//源单引入
			sourceFormInto(){
				
			}
		}
	}
</script>

<style>
	h2 {
		text-align: center;
	}

	.pur-main {
		border: 2px solid gainsboro;
		padding-top: 15px;
		padding-left: 20px;
		padding-right: 20px;
	}
	.upload{
		border: 1px solid #66B1FF;
		background: lightgray;
	}
	.pur-detail{
		border: 1px #66B1FF solid;
		margin-top: 10px;
		margin-bottom: 20px;
	}
</style>
